<template>
	<view style="padding: 20rpx;">
		<view class="row-h-center" style="height: 94rpx;">
			<view class="key" style="width: 120rpx;">
				采购商
			</view>
			<view class="key">
				青岛旺旺有限公司
			</view>
		</view>
			<view class="line"></view>
		<view class="row-between-center" style="height: 94rpx;">
			<view class="key">
				合同号
			</view>
			<view>
				<u-radio-group v-model="contractType" @change="groupChange">
					<u-radio shape="circle" label="选择"  name="选择"></u-radio>
					<u-radio shape="circle" label="输入" style="margin-left: 40rpx;"   name="输入"></u-radio>
				</u-radio-group>
			</view>
		
		</view>
		<view class="line"></view>
		<view class="row-between-center" style="height: 94rpx;" v-if="contractType=='选择'">
			<view class="choose">请选择合同号</view>
			<u-icon name="arrow-right" color="#000" size="14"></u-icon>
		</view>
		
		<view class="row-between-center" style="height: 94rpx;" v-if="contractType=='输入'">
			<input class="choose" placeholder="请输入合同号" placeholder-class="choose"></input>
		</view>
		
		
		<view class="line"></view>
		
		<view class="margin col padding" >
			<u--form labelPosition="left" :model="info" :rules="rules" ref="uForm">
				
				<u-form-item label="" prop="name"  :labelWidth="0"  >
					<view class="col" style="width: 100%;">
						<view class="row-between-center" >
							<view class="product row-bottom" style="margin-left: -20rpx;">
								<span style="color: #f56c6c;font-size: 40rpx;margin-top: 5rpx;">*</span>产品
							</view>
							<image src="/static/images/add.png" class="add" @click="goAdd"></image>
						</view>
						<view class="goods-title row-between-center" style="margin-top: 24rpx;">
							<view class="goods-title-item" >
								名称
							</view>
							<view class="goods-title-item row-center" >
								数量
							</view>
							<view class="goods-title-item row-end" >
								操作
							</view>
						</view>
						<view class="col" v-for="item,index in info.goods">
							<view class="row-w-center goods-item" style="width: 100%;margin-top: 10rpx;" >
								<view class="col" style="width: 33%;">
									<view class="goods-name">鲁花花生油</view>
									<view class="goods-scale">10L<span class="goods-price">¥100.00</span></view>
								</view>
								
								<view class="col-center" style="width: 33%;">
									<view class="goods-num">200</view>
								</view>
								
								<view class="row-end" style="width: 33%;align-items: center;">
									<view class="goods-delete" @click="deleteGoods">删除</view>
								</view>
								
							</view>
							<view class="goods-line" ></view>
						</view>
						
						<view class="goods-title row-between-center">
							<view class="goods-total" >
								合计金额
							</view>
							<view class="goods-total row-end" >
								<span class="goods-total-price">0.00</span>元
							</view>
						</view>
					</view>
					
				</u-form-item>
				
				
				<u-form-item label="是否含税" prop="auth_type"  :labelWidth="labelWidth" :borderBottom="true" required>
					<view class="row-between-center" style="width: 100%;">
						<view></view>
						<view>
							<u-radio-group v-model="info.hanshui">
								<u-radio shape="circle" label="含税"  name="含税"></u-radio>
								<u-radio shape="circle" label="不含税" style="margin-left: 40rpx;"   name="不含税"></u-radio>
							</u-radio-group>
						</view>
					</view>
				</u-form-item>
				
				<u-form-item label="约定交货日期" prop="name"  :labelWidth="labelWidth" :borderBottom="true" >
					<input class="input" placeholder="请输入" placeholder-class="place" v-model="info.name"/>
				</u-form-item>
				<u-form-item label="交货方式" prop="jiaohuo"  :labelWidth="labelWidth" :borderBottom="true" required>
					<input class="input" placeholder="请输入" placeholder-class="place" v-model="info.jiaohuo"/>
				</u-form-item>
				<u-form-item label="自提地址" prop="ziti"  :labelWidth="labelWidth" :borderBottom="true" required>
					<input class="input" placeholder="请输入" placeholder-class="place" v-model="info.ziti"/>
				</u-form-item>
				<u-form-item label="托运单位" prop="tuoyun"  :labelWidth="labelWidth" :borderBottom="true" required>
					<input class="input" placeholder="请输入" placeholder-class="place" v-model="info.tuoyun"/>
				</u-form-item>
			</u--form>
		</view>
		<view class=" padding">
			<view class="btn row-center" @click="goRegiste">
				保存订单并发送给采购商确认
			</view>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelWidth:120,
				contractType:'选择',
				info:{
					goods:[
						{},{},{}
					],
					hanshui:'',
					jiaohuo:'',
					ziti:'',
					tuoyun:'',
				},
				check:false,
				rules: {
					'goods': {
						type: 'array',
						min:1,
						required: true,
						message: '请选择商品',
						trigger: ['blur', 'change']
					},
					'hanshui': {
						type: 'string',
						required: true,
						message: '请选择是否含税',
						trigger: ['blur', 'change']
					},
					'jiaohuo': {
						type: 'string',
						required: true,
						message: '请输入交货方式',
						trigger: ['blur', 'change']
					},
					'ziti': {
						type: 'string',
						required: true,
						message: '请输入自提地址',
						trigger: ['blur', 'change']
					},
					'tuoyun': {
						type: 'string',
						required: true,
						message: '请输入托运单位',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		methods: {
			groupChange(e){
				
				console.log('groupChange',e)
			},
			goAdd(){
				uni.navigateTo({
					url:'/src/pages/buy/add_goods'
				})
			},
			deleteGoods(){
				
			},
			goRegiste(){
					this.$refs.uForm.validate().then(res => {
								uni.$u.toast('校验通过')
								uni.navigateTo({
									url:'/src/pages/buy/buy_order_detail'
								})
							}).catch(errors => {
								uni.navigateTo({
									url:'/src/pages/buy/buy_order_detail'
								})
								uni.$u.toast('校验失败')
					})
			},
		}
	}
</script>
<style>
	page{
		background-color: white;
	}
</style>
<style scoped lang="scss">
	.product{
		color: #17161B;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 44rpx; /* 157.143% */
	}
	.add{
		width: 44rpx;
		height: 44rpx;
	}
	
	.goods-title{
		height: 68rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		background: #F7F8FC;
		.goods-title-item{
			color:  #6A6876;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx; /* 180% */
		}
		.goods-total{
			color:  #17161B;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 44rpx; /* 157.143% */
		}
		.goods-total-price{
			color: #F5222D;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 44rpx; /* 157.143% */
		}
	}
	.goods-item{
		.goods-name{
			color: #20252B;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 40rpx; /* 166.667% */
		}
		.goods-scale{
			color: #6A6876;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx; /* 180% */
		}
		.goods-price{
			margin-left: 10rpx;
			color: #FF8934;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx; /* 180% */
		}
		.goods-num{
			color: #20252B;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx; /* 166.667% */
		}
		.goods-delete{
			color: #F5222D;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx; /* 166.667% */
		}
	
	}
	.goods-line{
		margin-top: 20rpx;
		height: 1rpx;
		background: #E6E6E6;
	}
	
	.line{
		background-color: #E6E6E6;
		height: 1rpx  ;
	}
	
	.padding{
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.margin{
		margin-left: 20rpx;
		margin-right: 20rpx;
		width: calc(100% - 40rpx);
	}
.tip{
	background: #F2F3F8;
	padding: 16rpx 20rpx;
	color: #6A6876;
	font-size: 24rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 40rpx; /* 166.667% */
}
.key{
	color:  #17161B;
	font-size: 28rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 44rpx; /* 157.143% */
}
.place{
	color: #C9CCD5;
	font-size: 28rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 44rpx; /* 157.143% */
}
.card{
	margin-top: 20rpx;
	width: 470rpx;
	height: 280rpx;
	flex-shrink: 0;
}

.check{
	width: 28rpx;
	height: 28rpx;
}
.btn{
	margin-top: 48rpx;
	width: 100%;
	height: 92rpx;
	flex-shrink: 0;
	border-radius: 32rpx;
	background: #3B60D3;
	color: #FFF;
	font-size: 32rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 44rpx; /* 137.5% */
}
.blue{
	margin-top: 48rpx;
	color: #2653A4;
	font-size: 24rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 36rpx;
}

.choose{
	color:  #C9CCD5;
	font-size: 28rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 44rpx; /* 157.143% */
}

</style>
